Hace tiempo que algo me llamó la atención en el blog de xOsse, es una de esas cosas que quieres poner en práctica pero pasan los días y por una cosa u otra te olvidas del tema.
Ayer mismo Pizcos que es todo un enamorado del diseño me descubre su hallazgo y viene a ser el mismo que yo tenía en el cajón del olvido. Así que ahí va para que no se olvide otra vez.
Lo que vamos a hacer es conseguir que con unos simples botones el fondo de nuestro blog cambie de color, así como suena.
Lo primero de todo será necesario alojar los archivos para la configuración de nuestro colores. Dichos archivos deben ser guardados en formato .css (hojas de estilo en cascada)
Necesitaremos un alojamiento y un poco de paciencia.
Vamos allá:
Lo que haremos será situarnos en nuestra plantilla y copiar todo lo que se encuentra dentro de <head> y </head>
Eliminamos las partes de scripts, variables, META's o si lo prefieren copien desde body { hasta }]]></b:skin>
Pueden ver un ejemplo de como quedaría o si lo desea pueden copiarlo para probar:
Una vez lo copiamos abrimos el bloc de notas y pegamos el código. Ahora sin salir del bloc de notas lo que haremos será sustituir los colores que deseamos cambiar, por ejemplo yo lo que hice fue sustituir el color de fondo y el texto de los post, también se puede hacer lo mismo con los enlaces, texto de la sidebar, título ...
Un ejemplo para el fondo y texto del blog sería el siguiente:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Donde background:$bgcolor; lo sustituimos por background-color: #000000; en color:$textcolor; pondremos color: #FFFFFF;
Una vez terminamos vamos a guardar el archivo, para identificarlo lo guardaremos con su nombre ya que a este archivo le añadimos de fondo el color negro (black)
Nos aseguraremos de guardar el archivo en formato css.
Si lo guardamos en formato txt. (texto) no será visible con Firefox.
Haremos el mismo procedimiento con el archivo para el fondo blanco, pero al contrario, es decir en background:$bgcolor; lo sustituimos por background-color: #FFFFFF; que es (blanco) o por cualquier otro color.
En color:$textcolor; pondremos color: #000000; o cualquier otro color.
Guardamos otra vez nuestro archivo en formato css. nuevamente lo identificamos, esta vez le ponemos de nombre stylewhite.css
Ya queda poco y es lo más rápido ;)
Vamos a alojar nuestros archivos en nuestro servidor y además de alojar el archivo stylewhite.css y styleblack.css alojaremos también cambiaestilos.js
Nos vamos a nuestra plantilla y justo antes de </head> añadimos lo siguiente:
<link href='url-de-nuestro-archivo-styleblack.css' rel='stylesheet' title='Negro' type='text/css'/>
<link href='url-de-nuestro-archivo-stylewhite.css' rel='alternate stylesheet' title='Blanco' type='text/css'/>
<script src='url-de-nuestro-archivo-cambiaestilos.js' type='text/javascript'></script>
Guardamos los cambios de nuevo y nos situamos en "Añadir un elemento de página/HTML /Javascript" en su interior agregamos lo siguiente:
<a href="javascript:chooseStyle('Negro', 365)">Negro</a> - <a href="javascript:chooseStyle('Blanco', 365)">Blanco</a>
Nos mostrará un texto "Negro - Blanco" si todo nos salió bien conseguiremos que al clicar nuestro fondo del blog cambie de color.
Para sustituir el texto por unos botones podemos hacerlo sustituyendo el texto por:
<img src="ur-de-la-imagen">
!Suerte¡
¡Qué chulada!
Este no me quedo sin probarlo...en cuanto encuentre un hueco en mi "apretada agenda" , je,je, se me está contagiando el ambientillo político de estos días.
En serio, es fantástico Gem@.
¡Abrazos!
Hola Gem@ no sè si es el post adapto para hacer mi pregunta pero igualmente la disparo, queria saber como hago para que en blogger,.. en vez de visualizar el nombre del autor y fecha de en el footer del post quisiera que se viera debajo del titulo?, no como se hace, si me explicas te agradeceria un mundo! chaoo
Gracias Gema!!! no era necesario
-)))...nadie como tu para explicarlo...
Saludos.
!Hola Rosa¡ con tiempo (eso que nosotras no sabemos lo que es) se le puede sacar mucho partido para dar un gran cambio al blog ;)
anónimo, creo que podría hacerse modificando la plantilla, ya que desde el organizador de elementos no es posible.
Ahora mismo no tengo demasiado tiempo para averiguarlo, si te urge solucionarlo te recomendaría la visita a J.Miur estoy segura que encontrarás rápida y eficaz solución a tu pregunta ;)
Pizcos gracias a ti :)
Hola Gema una pregunta fuera el tema expuesto!?
hay alguna forma de poner gravatar para blogger, pero sin usar haloscan, mira en xyberneticos encontré este pequeño pedazo de
codigo
pero esta en PHP, mas o menos investigando creo que ese pedazo de código se puede agregar por la parte de dl id='comments-block' pero habría que pasarlo a xml pero se muy poco y no se capas tu pudieras pasarlo o conversar lo con tus amigos de vagabundia o de otros blog !! gracias espero la respuesta y si o se puede bueno psss algun lo hare yop XD saludos
.Sm4C. para añadir un gravatar o imagen del perfil puedes ver esta entrada no sé si es más o menos lo que buscas ;)
Hola Gema!Me gusta mucho tu blog, a pesar de que soy una principiante me arriesgo a probar alguno de tus trucos. felicidades!!!
Tengo una duda: quiero insertar una imagen con fondo tansparente en la barra lateral y no me deja (me sale con el cuadro blanco) Cómo puedo hacerlo??
Gracias
Hola Tonia prueba a hacerlo con una imagen en formato png. para que no salga el fondo de la imagen.
Hola Malina, gracias por venir a informarme ;)
Lo que me sobra no es precisamente tiempo, pero más adelante quizás me anime ;)
Gracias.
¿Qué tal vas Juan Carlos ?
Hola gem@, otra vez yo molestando, pero esta vez con algo nuevo que tiene que ver con este tema, como ya te dije estoy modificandole su blog nuevo a mi hijo, y me encontré con un problema que no se como solucionar, ya probé con todo lo que encontré en tu blog pero no puedo.
El asunto es que en los comentarios, los enlaces de los comentaristas no se ven porque salen del mismo color que el fondo del blog, y no he podido cambiarle el color, esta plantilla tiene todo el css a la vista y aún así no puedo o no se cual es el color que corresponde para el enlace del que comenta.
Por si no me entiendes bien fijate la url es: http://rendev.blogspot.com
Desde ya disculpa mi pesadés y mil gracias por todo!
Leiste el comentario donde te decía que logré poner el leer mas en mi blog? Ahora ya empieza a marchar, y todo gracias a vos!
Ahh... estoy logueada como mi hijo, mejor así entrás por el enlace y mirás el blog, cuando tengas tiempo claro.
Bueno ahora tengo que aclararte que soy k_nelita ja ja
Besotes!!
k_nelita ¿te refieres al enlace que indica el número de comentarios?
Si es así busca:
/* Posts
------------------
Y en:
.post-footer a {
color:#444;
}
Sustituye lo que está en negrita por el color que deseas,eso hará que los enlaces del pos-footer cambien de color (las etiquetas y el número de comentarios)
Si no fuera eso dime donde aparece lo que deseas cambiar ;)
Gem@, que rápido, no no es a eso que me refiero es a... como te explico, vos escribiste en el blog de mi hijo, al expandir el articulo y salen los comentarios abajo con el icono de Blogger o lo que sea, al lado debe salir tu nick, pero como el color es del mismo color del fondo no se ve.
Fijate ahora que ya escribiste que no se ven los nicks de ninguno de los que escribieron, se ve el icono pero el nick, no.
Si querés te paso la plantilla por mail, yo le hice algunos cambios para corregir lo del color de los nicks pero no arreglaron nada, al contrario creo que quedó peor.
Gracias por todo y también por el comentario que le dejaste a mi hijo.
Besotes!
K_nelita los comentarios me llevan a una ventana aparte ¿hablamos de Son_Paul ?
Si gem@, hablamos de Son_Paul, aquí mismo estoy corrigiéndole una vez mas la cabecera, también le puse tu banner, para tenerte mas a mano ja ja
Los comentarios se abren en ventana aparte porque todavía no me puse a buscar que abran en el mismo articulo, pero si clicás en el título del articulo te salen abajo, y allí ves los iconos que te digo pero no el nick de los comentaristas, aunque no se, recién le metí mano de nuevo y le modifiqué algo de los colores, pero todavía no probé a ver como se ven.
También hay otros enlaces que no se ven en los comentarios, creo que es fecha y no se que mas porque el color que le puso el creador de la plantilla es el mismo que el fondo. Mirala de nuevo por favor!
Besotes (k_nelita)
PD: Vives en Cartagena, Murcia? es real el dato que me pasa el FeedJit?
Vamos a ver... antes de nada yo lo que haría sería que se visionaran los comentarios abajo (como tú dices) pero no solo al clicar en el título sino en el enlace para comentarios que hay debajo de los post.
(yo también tengo mis manías k_nelita y una de ellas es conseguir que cada cosa funcione) jajajaja
Veamos.. hay que expandir la plantilla y buscar:
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
Y sustituirlo por:
<a class='comment-link' expr:href='data:post.url + "#comments"'>
Dar color a los "comentaristas" es una tarea de personalizar los comentarios. El autor o no repasa el trabajo que hizo o le importaba bien poco el resultado, lo cierto es que a todos los enlaces de la plantilla les adjudicó el mismo color de la plantilla. ¿resultado? da la sensación que no existen.
así que vamos a darle color a los enlaces para que sean visibles.
Busca:
body { debajo vemos una serie de stilos para los enlaces:
a:link {
color:#ccc;
text-decoration:none;
}
a:visited {
color:#ccc;
text-decoration:none;
}
a:hover {
color:#ccc;
text-decoration:underline;
}
Puedes modificar el código anterior teniendo en cuenta que:
a:link { "color del enlace sin actividad"
a:visited {"color de enlaces visitados.
a:hover { "color de enlaces al pasar el cursor.
Ya me dirás el resultado ;)
Y bueno, ya te contesté en el mail, soy de Cartagena (Murcia)
Tan lejos y tan cerca ¿verdad?
Tan cerca que te daría un beso aunque sea virtual, sos una genia gem@! Lo sabés todo y tenés tanta paciencia con todo el mundo, que deberíamos levantarte un monumento.
Este prólogo es para decirte que lo logré!! Aleluyaaaaa!! Gracias millones de gracias!!
Ya están los enlaces bien, al menos se ven, hasta les puse un subrayado porque como no salen en negrita, para que se vean mejor.
Lo que pasa que los colores tienen que armonizar con la sidebar también, y lo que queda bien sobre el gris, no se ve bien sobre el azul, así que lo solucioné de esa manera que en cualquier momento verás no?
También logré poner que los comentarios no se vieran en ventana aparte, quedó muy bien!
Gracias, ya no se que decirte gem@, sos una diosa!
Ahora voy a ver si trato de arreglar lo de la imagen de mi blog, con todo esto no tuve tiempo.
Besoooooote!!
Tu comentario me hizo sonreír con ganas k_nelita, me alegra que los resultados sean de tu agrado. Ahora a por la imagen y luego.... seguro que llegarán más cambios jajajaja.
Aquí estaré, esperando ;)
excelente ayuda para los usurios
Muchas gracias Tecologia educactiva, aprovecho para felicitarle por la idea de su blog.
esto se me pasó ohhh ohhh!!!, no sé si seré capáz con eso de los archivos!!!...ando buscando la burbujita de los comentarios porque tu ahijado me ha dicho de centrar 'la cantidad de comentarios' como te lo he copiado todo menos la burbujita que LA HICE YO!!! jajaja...chauuuu Gema sigo por acá
Graciela veo que ya está centrada la burbujita ;)
me ha encantado este post, lo acabé de probar con imagenes, no solo colores de texto y me ha gustado mucho.
muchas gracias!
Gracias por el comentario Miguel, en verdad que te ha quedado bien lindo con las diferentes imágenes de colores :)
Hola mi nombre es faviola y siempre visito tu blog porke es d mucha ayuda creo yo para todos, gracias por todas las cosas ke publikas.
Bueno una vez dicho lo dicho kiero pedirte, si es ke puedes y tienes tiempo por supuesto me ayudes en un problemilla ke tengo.
kiero poner etiketas y antes ya eh kitado el nombre del blog para remplazarlo por mi propia imagen pero kuando piko en kualkier entrada d mis etiketas me sale el nombre kon las letras orrorosas ke me pone blogger encima d mi imagen ya kambiada.
ke puedo hacer, ke eh estado por ahí buskando solucion pero ya no llego al parecer jajaja sin mas un besito y gracias d nuevo
bye
warmyhaya he visto que tienes algunos blogs tengo que saber de qué blog me hablas para ver ese problema ;)
Hola Gema, por fin conseguí hacer el slider y todo lo demás, cuestión de paciencia y probar hasta que un día me levanté y funcionaba todo!
Iba a cambiar definitivamente el estilo de mi blog y justo encontré esto, ¡Es perfecto! Ya lo he aplicado a mi blog y me encanta.
Tengo un problema con el feed que soy incapaz de resolver. Desde hace bastante mi feed se había quedado estancado en un post y cuando actualizaba no avisaba a los que me tenían enlazados. He eliminado la entrada que estaba congelada y un chat que había incluido el día que comenzaron los problemas y nada. He cambiado de plantilla y tampoco. Así que me he ido a cambiar el feed. He seguido los pasos para hacer un nuevo feed en feedburner y me dice que error, que es demasiado grande. ¿Cómo puedo solucionar esto?
Siento las molestias
Luxuria hace unos meses que Feedburner pasó a ser de Google, la dirección ahora es
http://feedburner.google.com
Prueba por ahí por si fuera más efectivo ;)
hola gem@, ¿cuál era el código para cambiar el color del texto en solo un widget de la sidebar? se me ha olvidado y no lo encuentro por ningún lado. mi santo sigue yéndose al cielo, no hay caso...
:: lk hasta donde yo sé no ha un código especifico para eso.
Se pueden añadir unos estilos a un gadget concreto si con antelación sabemos la id de ese gadget :)
hola gem@, gracias, ya lo arreglé.
gem@, hola, no sé si te lo dejé en este sitio, lo que necesito es el script para poner un color de texto en un widget.
:: lk para añadir estilos a un texto no es necesario ningún script, no sé lo que deseas hacer si me explicas un poco más vemos como hacerlo ;)
vale. en http://paraninosconcabeza.blogspot.com, en el footer, hay un texto en negro. es un widget en el footer. me gustaría cambiarlo a rojo...
:: Puedes hacerlo de una forma sencilla y rápida con la etiqueta span:
<span style="color:#990000"> aquí el texto que deseas en color rojo </span>
Nota: solo los miembros de este blog pueden publicar comentarios.